<template>
  <view>
    <!-- 用户列表 -->
    <uni-table :border="true">
      <uni-tr>
        <uni-th align="center">用户名</uni-th>
        <uni-th align="center">权限</uni-th>
        <uni-th align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="user in users" :key="user.id">
        <uni-td align="center">{{ user.username }}</uni-td>
        <uni-td align="center">{{ formatPermissions(user.selectedPermissions) }}</uni-td>
        <uni-td align="center">
          <uni-button type="primary" size="mini" @click="openPermissionModal(user)">编辑</uni-button>
        </uni-td>
      </uni-tr>
    </uni-table>

    <!-- 权限分配弹窗 -->
    <view v-if="showPermissionModal" class="popup-overlay">
      <view class="popup-container">
        <view class="popup-header">
          <text>分配权限给 {{ selectedUser.username }}</text>
        </view>
        <view class="popup-body">
          <uni-section title="选择权限" subTitle="请选择分配给用户的权限" type="line">
            <view class="uni-px-5 uni-pb-5">
              <uni-data-checkbox 
                multiple 
                v-model="selectedUser.selectedPermissions" 
                :localdata="menuOptions"
              ></uni-data-checkbox>
            </view>
          </uni-section>
        </view>
        <view class="popup-footer">
          <uni-button type="primary" size="mini" @click="assignPermissions">保存</uni-button>
          <uni-button type="default" size="mini" @click="closePermissionModal">取消</uni-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      menuOptions: [],
      selectedUser: null,
      showPermissionModal: false
    };
  },
  methods: {
    async fetchUsers() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/get_users',
        method: 'POST'
      });
      if (res.data.code === 200) {
        this.users = res.data.data.map(user => ({
          ...user,
          selectedPermissions: user.permissions ? user.permissions.split(',') : []
        }));
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    async fetchMenus() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/get_menus',
        method: 'POST'
      });
      if (res.data.code === 200) {
        this.menuOptions = res.data.data.map(menu => ({
          value: menu.id,
          text: menu.name
        }));
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    openPermissionModal(user) {
      // 获取用户权限详情
      this.fetchUserPermissions(user.id);
      this.selectedUser = { ...user };
      this.showPermissionModal = true;
    },
    async fetchUserPermissions(userId) {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/get_user_permissions',
        method: 'POST',
        data: {
          user_id: userId
        }
      });
      if (res.data.code === 200) {
        this.selectedUser.selectedPermissions = res.data.data.map(permission => permission.id);
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    closePermissionModal() {
      this.selectedUser = null;
      this.showPermissionModal = false;
    },
    async assignPermissions() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/assign_permissions',
        method: 'POST',
        data: {
          user_id: this.selectedUser.id,
          permissions: this.selectedUser.selectedPermissions.join(',')
        }
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '权限分配成功',
          icon: 'success',
          duration: 2000
        });
        this.closePermissionModal();
        this.fetchUsers(); // 更新用户列表
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000
        });
      }
    },
    formatPermissions(permissions) {
      return permissions.map(p => {
        const menu = this.menuOptions.find(m => m.value == p);
        return menu ? menu.text : '';
      }).join(', ');
    }
  },
  mounted() {
    this.fetchUsers();
    this.fetchMenus();
  }
};
</script>

<style>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
}

.popup-header {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.popup-body {
  margin-bottom: 20px;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
}
</style>
